<script>
export default {
  props: {
    statusCode: {
      type: Number,
      default: 2,
    },
    startTime: {
      type: String,
    },
    endTime: {
      type: String,
    }
  },
  data() {
    return {
      detailInfo: [
        {
          tag: '开始时间',
          content: this.startTime,
          style: 'font-weight: 800;'
        },
        {
          tag: '结束时间',
          content: this.endTime,
          style: 'font-weight: 800;'
        },
        {
          tag: '审批流程',
          content: '共1步'
        },
        {
          tag: '紧急联系人',
          content: '13935501458',
          tagStyle: 'width: auto'
        },
        {
          tag: '审批人',
          content: '宫萍'
        },
        {
          tag: '请假原因',
          content: '因考研英语课程，需要离校上课'
        },
      ],
      detailInfo2: [
        {
          tag: '发起位置',
          content: '辽宁省沈阳市沈北新区日月环路',
          style: 'color: #39f;'
        },
        {
          tag: '抄送人',
          content: '无'
        },
        {
          tag: '目的地',
          content: '辽宁省/沈阳市/沈河区/佳兆业B座'
        },
      ]
    }
  }
}
</script>

<template>
  <div class="container">
    <div class="count">8小时</div>
    <img class="icon-pass" src="../assets/common-pass.png" alt="通过" />
    <div class="title font-dark">我的 请假申请</div>
    <div class="col" v-for="(item, index) in detailInfo" :key="index">
      <div
        class="font-light"
        style="width: 16vw;"
        :style="item.tagStyle ? item.tagStyle : ''"
      >{{ `${item.tag}：` }}</div>
      <div
        class="font-normal"
        style="margin-left: 1.33333vw;"
        :style="item.style ? item.style : ''"
      >{{ item.content }}</div>
    </div>
    <div class="col">
      <div class="font-light" style="width: 16vw;">附件：</div>
      <div class="imgs">
        <img class="img" src="../assets/logo.png" />
        <img class="img" src="../assets/logo.png" />
        <img class="img" src="../assets/logo.png" />
        <img class="img" src="../assets/logo.png" />
      </div>
    </div>
    <div class="col" v-for="(item, index) in detailInfo2" :key="index">
      <div class="font-light" style="width: 16vw;">{{ `${item.tag}：` }}</div>
      <div
        class="font-normal"
        style="margin-left: 1.33333vw;"
        :style="item.style ? item.style : ''"
      >{{ item.content }}</div>
    </div>
    <div
      class="font-warning"
      style="font-size: 3.2vw; margin-bottom: 1.33333vw;"
    >本人承诺填写的信息真实有效，并对本次提交请假申请的信息真实性负责。</div>
  </div>
  <div class="container" v-if="statusCode === 2">
    <div class="title font-dark">销假信息</div>
    <div class="col">
      <div class="font-light" style="width: 16vw;">所在位置：</div>
      <div class="font-normal">辽宁省沈阳市沈北新区广智路</div>
    </div>
  </div>
</template>

<style scoped>
.container {
  position: relative;
  padding: 2.66667vw 5.33333vw;
  margin-top: 2.66667vw;
  font-size: 3.73333vw;
  background-color: #fff;
}
.icon-pass {
  position: absolute;
  top: 21.33333vw;
  right: 4.26667vw;
  z-index: 1;
  width: 18.66667vw;
}
.title {
  margin-bottom: 2.66667vw;
}
.col {
  display: flex;
  margin-bottom: 1.33333vw;
  font-size: 3.2vw;
}
.count {
  position: absolute;
  right: 5.33333vw;
  top: 10.33333vw;
  background: rgba(51, 153, 255, 0.1);
  border: 1px solid #91c3fd;
  padding: 1.33333vw 2.66667vw;
  color: #39f;
  font-size: 3.73333vw;
  font-weight: 700;
  border-radius: 1.06667vw;
}
.imgs {
  display: flex;
}
.img {
  width: 13.3333vw;
  height: 13.3333vw;
  margin-right: 1.33333vw;
}
</style>